<template>
	<div class="express">
		<pubHead title="查看物流"></pubHead>
		<div class="goods_infos flexv">
		    <div class="goods_box flex">
		        <img :src="infoData.image" class="goods_img" alt="">
		
		        <div class="goods_info flex1 flexv jus-b">
		            <p class="twoline title">物流状态：{{infoData.State}}</p>
		            <p class="spec">物流公司：{{infoData.name}}</p>
					<p class="spec">运输单号：{{infoData.LogisticCode}}</p>
		        </div>
		    </div>
			<van-steps direction="vertical" :active="0" style="margin-top: 0.5rem;">
			  <van-step v-for="(item,index) in infoData.Traces" :key="index">
			    <h3 class="step-h3">{{item.AcceptStation}}</h3>
			    <p class="step-p">{{item.AcceptTime}}</p>
			  </van-step>
			  
			</van-steps>
		</div>
		
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Step, Steps,Toast } from 'vant';
	
	Vue.use(Step);
	Vue.use(Steps);
	import pubHead from '@/components/head';
	import {lookLogistics} from '@/request/api.js'
	export default{
		components: {
		    pubHead,
		},
		data(){
			return {
				goodId:'',
				infoData:''
			}
		},
		created() {
			this.goodId = this.$route.query.id
			this.getData()
		},
		methods:{
			getData(){
				this.$loading()
				lookLogistics({
					order_id:this.goodId,
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						this.infoData = res.data
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.express{
		// 商品信息
		.goods_infos{
		    padding: 0.3rem;
		    background-color: #fff;
		    .head{
		        font-size: 0.28rem;
		        line-height: 120%;
		        color: #333;
		    }
			.step-h3{
				font-size: 0.3rem;
			}
			.step-p{
				font-size: 0.26rem;
			}
		    .goods_box{
		        margin-top: 0.3rem;
		        .goods_img{
		            width: 1.8rem;
		            height: 1.8rem;
		            border-radius: 0.1rem;
		        }
		        .goods_info{
		            margin-left: 0.2rem;
		            .title{
		                font-size: 0.28rem;
		                line-height: 150%;
		                color: #333;
		            }
		            .spec{
		                margin-right: auto;
		                font-size: 0.24rem;
		                line-height: 120%;
		                color: #999;
		            }
		            .others{
		                .price{
		                    font-size: 0.28rem;
		                    line-height: 120%;
		                    color: #ee1a1c;
		                }
		                .num{
		                    font-size: 0.28rem;
		                    line-height: 120%;
		                    color: #333;
		                }
		            }
		        }
		    }
		    .totals{
		        margin-top: 0.3rem;
		        font-size: 0.28rem;
		        line-height: 120%;
		        color: #333;
		        .total_price{
		            font-size: 0.36rem;
		            line-height: 120%;
		            color: #ee1a1c;
		        }
		    }
		}
	}
</style>
